<template>
  <div class="WithdrawalRecord">
    <el-card>
      <h3><span class="tag"></span> 提现审核</h3>
      <div class="searchBox">
        <span class="txt">提现时间：</span>
        <el-date-picker
          size="small"
          v-model="timeArr"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="timeOptions"
          value-format="yyyy-MM-dd"
          @change="focusA"
        >
        </el-date-picker>
        <span class="margin"></span>
        <span class="txt">用户ID：</span>
        <el-input v-model="userID" clearable size="small"></el-input>
        <span class="margin"></span>
        <span class="margin"></span>
        <!-- <span class="txt">提现套餐：</span>
        <el-select
          class="channelselect"
          v-model="type"
          placeholder="请选分类"
          size="small"
        >
          <el-option label="头像" value="1"> </el-option>
          <el-option label="相册" value="2"> </el-option>
        </el-select> -->
        <el-button
          class="btn"
          icon="el-icon-search"
          size="small"
          @click="search"
          >查询搜索</el-button
        >
      </div>
      <div class="typeBox">
        <div>
          <el-radio-group
            v-model="status"
            @change="search"
            size="small"
            fill="#7b94d8"
          >
            <el-radio-button label="2">待审核</el-radio-button>
            <el-radio-button label="1">已通过</el-radio-button>
            <el-radio-button label="-1">全部</el-radio-button>
          </el-radio-group>
        </div>
        <div class="right">
          当前低于：<span>{{ autoAuditCash }}元</span> 开启自动提现
          <el-button
            class="btn"
            size="small"
            @click="
              dialogVisible = true;
              setAutoAuditCash = autoAuditCash;
            "
            >快捷提现审核金额设置</el-button
          >
        </div>
      </div>
      <el-table
        :data="tableData"
        v-loading="loading"
        style="width: 100%; margin-top: 10px"
        :header-cell-style="{ background: '#f5f7fa' }"
      >
        <template slot="empty">
          <el-empty :image-size="200"></el-empty>
        </template>
        <el-table-column prop="id" label="提现订单号"> </el-table-column>
        <el-table-column prop="nickname" label="提现人昵称"> </el-table-column>
        <el-table-column prop="userId" label="提现人ID"> </el-table-column>
        <el-table-column label="提现方式和账号">
          <template slot-scope="scope">
            支付宝<br />
            {{ scope.row.alipayAccount }}<br />
            {{ scope.row.alipayRealname }}
          </template>
        </el-table-column>
        <el-table-column prop="amount" label="提现金额"> </el-table-column>
        <el-table-column prop="mobile" label="提现人手机号"> </el-table-column>
        <el-table-column prop="createTime" label="提现时间"> </el-table-column>
        <el-table-column
          prop="auditTime"
          v-if="status != 2"
          key="123"
          label="提现审核时间"
        >
        </el-table-column>
        <el-table-column prop="shType" label="审核类型">
          <template slot-scope="scope">
            {{ scope.row.shType == 1 ? "自动审核" : "手动审核" }}
          </template>
        </el-table-column>
        <el-table-column prop="status" label="订单状态">
          <template slot-scope="scope">
            {{
              scope.row.status == 0
                ? "待审核"
                : scope.row.status == 1
                ? "审核成功"
                : "审核失败"
            }}
          </template>
        </el-table-column>
        <el-table-column v-if="status != 2" key="2333445" label="审核凭证">
          <template slot-scope="scope">
            <el-image
              style="width: 100px; height: 80px"
              v-if="scope.row.dkpz"
              :src="scope.row.dkpz"
              :preview-src-list="[scope.row.dkpz]"
            >
            </el-image>
          </template>
        </el-table-column>
        <el-table-column width="200" label="操作">
          <template slot-scope="scope">
            <el-button
              size="small"
              type="primary"
              v-if="scope.row.status == 0"
              @click="sh(scope.row.id)"
              plain
              >审 核</el-button
            >
            <el-button
              size="small"
              type="warning"
              v-if="scope.row.status != 0"
              @click="dkpz(scope.row.id)"
              plain
              >上传/修改转款凭证</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <pagination
        :total="total"
        :page.sync="page"
        :limit.sync="pageSize"
        @pagination="getList"
      />
    </el-card>
    <el-dialog title="设置" center :visible.sync="dialogVisible" width="20%">
      低于<el-input
        v-model="setAutoAuditCash"
        style="width: 50%; margin: 0 10px"
        onkeyup="this.value=value.replace(/[^\d{1,}\.\d{1,}|\d{1,}]/g,'')"
      ></el-input
      >元
      <br />
      <br />
      自动审核通过并转款
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogVisible = false">取 消</el-button>
        <el-button size="small" class="btn" @click="setSubmit">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="提现审核"
      center
      :visible.sync="dialogVisibleA"
      width="30%"
    >
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="审核结果">
          <el-radio-group v-model="form.status">
            <el-radio label="1">通过</el-radio>
            <el-radio label="2">不通过</el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- <el-form-item label="打款凭证">
          <el-upload
            class="avatar-uploader"
            :http-request="upLoad"
            :show-file-list="false"
            action
          >
            <div class="imgbox" v-if="form.dkpz">
              <img :src="form.dkpz" class="avatar" />
            </div>
            <i v-else class="upicon el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item> -->
        <el-form-item label="备注">
          <el-input
            type="textarea"
            style="width: 350px"
            v-model="form.remark"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogVisibleA = false"
          >取 消</el-button
        >
        <el-button size="small" class="btn" @click="shSubmit">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="打款凭证"
      center
      :visible.sync="dialogVisibleB"
      width="30%"
    >
      <el-form ref="formA" :model="formA" label-width="80px">
        <el-form-item label="上传凭证">
          <el-upload
            class="avatar-uploader"
            :http-request="upLoad"
            :show-file-list="false"
            action
          >
            <div class="imgbox" v-if="formA.dkpz">
              <img :src="formA.dkpz" class="avatar" />
            </div>
            <i v-else class="upicon el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogVisibleB = false"
          >取 消</el-button
        >
        <el-button size="small" class="btn" @click="dkpzSubmit"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from "@/components/Pagination"; // 分页
import {
  withdraworderQueryList,
  withdraworderWithdrawOrderAudit,
  withdraworderWithdrawConfig,
  withdraworderUploadDkpz,
} from "@/api/operationManagement";
import { client } from "@/utils/oss.js";
import { ossToken } from "@/api/NotificationManagement";
export default {
  components: { Pagination },
  data() {
    return {
      loading: false,
      timeArr: [],
      startDate: "",
      endDate: "",
      userID: "",
      // type: "",
      status: "2",
      autoAuditCash: "",
      setAutoAuditCash: "0",
      tableData: [],
      total: 0,
      page: 1,
      pageSize: 10,
      timeOptions: {
        disabledDate(platformValue) {
          return platformValue.getTime() > Date.now() - 8.64e6;
        },
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 6);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      dialogVisible: false,
      dialogVisibleA: false,
      dialogVisibleB: false,
      form: {
        orderId: "",
        status: "1",
        remark: "",
      },
      formA: {
        id: "",
        dkpz: "",
      },
    };
  },
  methods: {
    //选着时间
    focusA(time) {
      if (!this.timeArr) {
        this.timeArr = [];
      }
      this.startDate = this.timeArr[0];
      this.endDate = this.timeArr[1];
    },
    async getList() {
      this.loading = true;
      const res = await withdraworderQueryList({
        page: this.page,
        pageSize: this.pageSize,
        userId: this.userID,
        startTime: this.startDate,
        endTime: this.endDate,
        status: this.status,
      });
      this.loading = false;
      if (res.code == 0) {
        this.tableData = res.data.list;
        this.total = parseInt(res.data.total);
        this.autoAuditCash = res.data.autoAuditCash;
      }
    },
    search() {
      this.page = 1;
      this.getList();
    },
    //审核
    sh(id) {
      this.form = {
        orderId: id,
        status: "1",
        remark: "",
      };
      this.dialogVisibleA = true;
    },
    async shSubmit() {
      const res = await withdraworderWithdrawOrderAudit(this.form);
      if (res.code == 0) {
        this.$message.success("操作成功！");
        this.getList();
        this.dialogVisibleA = false;
      }
    },
    dkpz(id) {
      this.formA = {
        id,
        dkpz: "",
      };
      this.dialogVisibleB = true;
    },
    async dkpzSubmit() {
      if (this.formA.dkpz == "") {
        return this.$message.error("请先上传凭证！");
      }
      const res = await withdraworderUploadDkpz(this.formA);
      if (res.code == 0) {
        this.$message.success("上传成功！");
        this.getList();
        this.dialogVisibleB = false;
      }
    },
    //上传
    async upLoad(file) {
      await ossToken({
        type: 0,
      }).then((res) => {
        if (res.code == 0) {
          this.dataObj = {
            accessKeyId: res.data.accessKey,
            accessKeySecret: res.data.accessSecret,
            securityToken: res.data.token,
            region: "oss-" + res.data.regionId,
            bucket: res.data.bucket,
          };
        }
      });
      const self = this;
      let fileNames =
        "/img/" +
        Math.round(new Date() / 1000) +
        "." +
        file.file.name.substring(file.file.name.lastIndexOf(".") + 1);
      console.log(fileNames);
      client(this.dataObj)
        .multipartUpload(fileNames, file.file)
        .then((result) => {
          //下面是如果对返回结果再进行处理，根据项目需要
          this.formA.dkpz = "https://img.psychexy.com" + fileNames;
          self.$message({
            message: "上传成功",
            type: "success",
          });
        })
        .catch((err) => {
          self.$message.error("上传失败");
        });
    },
    //配额设置提交
    async setSubmit() {
      const res = await withdraworderWithdrawConfig({
        cash: this.setAutoAuditCash,
      });
      if (res.code == 0) {
        this.$message.success("设置成功！");
        this.getList();
        this.dialogVisible = false;
      }
    },
  },
  created() {
    this.getList();
  },
};
</script>

<style lang="less" scoped>
.WithdrawalRecord {
  padding: 20px;
  h3 {
    margin: 0 0;
    display: flex;
    align-items: center;
    .tag {
      display: inline-block;
      width: 5px;
      height: 18px;
      background-color: #7b94d8;
      margin-right: 10px;
    }
  }
  .searchBox {
    display: flex;
    align-items: center;
    margin: 20px 0;
    .margin {
      margin: 0 10px;
    }
    .txt {
      display: inline-block;
      height: 32px;
      background-color: #f5f7fa;
      line-height: 32px;
      padding-left: 10px;
      color: #9d9399;
      border-radius: 4px 0 0 4px;
      border: 1px solid #dcdfe6;
      border-right: none;
    }
    /deep/ .el-input__inner {
      border-radius: 0 4px 4px 0 !important;
    }
    .el-input {
      width: 200px;
    }
  }
  .typeBox {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .right {
      span {
        color: red;
      }
    }
  }
  .plcz {
    margin-left: 0 !important;
  }
  .upicon {
    display: inline-block;
    width: 350px;
    height: 120px;
    line-height: 120px;
    font-size: 24px;
    border: 1px dashed #ccc;
    border-radius: 8px;
  }
  .imgbox {
    position: relative;
    .avatar {
      display: inline-block;
      width: 350px;
      height: 120px;
      line-height: 120px;
      font-size: 24px;
      border: 1px dashed #ccc;
      border-radius: 8px;
      padding: 2px;
    }
    i {
      position: absolute;
      top: -10px;
      right: -10px;
      font-size: 24px;
      font-weight: 700;
      color: #000;
    }
  }
}
</style>